<template>
  <div class="summary">
    <div class="summary-title">事务汇总</div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.date }}</span>
          <el-date-picker
            v-else
            v-model="scope.row.date"
            type="date"
            placeholder="Pick a day"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
          />
        </template>
      </el-table-column>
      <el-table-column prop="message" label="事务内容">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.message }}</span>
          <el-input v-else v-model="scope.row.message"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="option" label="其他" width="180">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="update(scope.$index)"
            v-if="!scope.row.editing"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            v-if="scope.row.editing"
            @click.prevent="confirm(scope.$index, scope.row)"
          >
            确认
          </el-button>
          <el-button
            link
            v-if="scope.row.editing"
            type="primary"
            size="small"
            @click.prevent="cancel(scope.$index)"
          >
            取消
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="mt-4" style="width: 100%" @click="onAddItem">新增</el-button>
  </div>
</template>
<script setup>
import "./index.scss";
import { ElMessage } from "element-plus";
import { ref, onMounted, watch } from "vue";
import { summarySearch, summaryUpdate, summaryDelete } from "@/request/axios";
const params = {
  id: "",
  date: "",
  message: "",
  editing: true,
};
let tableData = ref([]);
const getData = async () => {
  const resSearch = await summarySearch();
  if (Array.isArray(resSearch.data) && resSearch.data?.length == 0) {
    tableData.value.push(params);
  } else {
    tableData.value = [];
    resSearch.data.forEach((val) => {
      tableData.value.push(val);
    });
  }
};
onMounted(() => {
  getData();
});

// const resDelete = summaryDelete({
//   id: "1",
// });
const onAddItem = () => {
  let params = {
    // id: "",
    date: "",
    message: "",
    editing: true,
  };
  tableData.value.push(params);
};

// 编辑
const update = (index) => {
  tableData.value[index].editing = true;
};
// 取消
const cancel = (index) => {
  tableData.value[index].editing = false;
  tableData.value[index] = {
    // id: "",
    date: "",
    message: "",
    editing: true,
  };
};
// 确定
const confirm = async (index, data) => {
  tableData.value[index].editing = false;
  const res = await summaryUpdate(data);
  if (res?.data?.success) {
    ElMessage({
      message: res?.data?.message,
      type: "success",
    });
  } else {
    ElMessage({
      message: res?.data?.message,
      type: "warning",
    });
  }
  getData();
};
// 删除
const deleteRow = async (index, data) => {
  // tableData.value.splice(index, 1);
  const res = await summaryDelete({ id: data?.id });
  if (res?.data?.success) {
    ElMessage({
      message: res?.data?.message,
      type: "success",
    });
  } else {
    ElMessage({
      message: res?.data?.message,
      type: "warning",
    });
  }
};
</script>
<style scoped></style>
